<script setup>
import {
  GetListAPI,
  AddDataAPI,
  GetViewAPI,
  EditDataAPI,
  DelDataAPI,
  EnableAPI,
  StopAPI,
} from '@/api/device/maintenance/plan.js'
import Form from './form.vue'
const { proxy } = getCurrentInstance()
// 封装 方法 字典查询
const { maintenance_plan_status } = proxy.useDict('maintenance_plan_status')

// 回显数据
const ruleForm = ref({})

//表单ref
const formRef = ref(null)

// 表格数据
const tableData = ref([])

// 按钮枚举
const btnList = ref([])
//状态
const state = reactive({
  title: '新增',
  loading: false, // 表格加载状态
  total: 0, // 列表总数量
  ids: [], // 勾选id
  rows: [], // 勾选数据
  btnLoading: false, // 保存按钮加载
  isShow: false, // 弹窗
  singleDis: false, // 多选后禁用
  multipleDis: false, // 没有选择后禁用
})

// 分页参数
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 查询枚举
const selectList = ref([
  {
    label: '计划编号',
    model: 'maintenancePlanCode',
    type: '输入框',
  },
  {
    label: '计划名称',
    model: 'planName',
    type: '输入框',
  },
  {
    label: '状态',
    model: 'status',
    type: '下拉单选',
    opt: maintenance_plan_status,
  },
])

/**
 * 列表枚举
 */
const column = ref([
  { label: '计划编号', prop: 'maintenancePlanCode' },
  { label: '计划名称', prop: 'planName' },
  { label: '状态', prop: 'status' },
  { label: '计划类型', prop: 'planTypeDict' },
  { label: '周期时间', prop: 'executionInterval' },
  { label: '计划开始时间', prop: 'planStartTime' },
  { label: '计划结束时间', prop: 'planEndTime' },
  { label: '创建人', prop: 'createBy' },
  { label: '创建时间', prop: 'createTime' },
  { label: '操作', prop: 'x' },
])

/**
 * 初始化按钮
 */
const initBtn = () => {
  btnList.value = [
    {
      label: '新增',
      type: 'add',
      hasPermi: 'maintenance:plan:add',
    },
    // {
    //   type: 'remove',
    //   disabled: state.multipleDis,
    //   hasPermi: 'device::plan:remove'
    // }
  ]
}

/**
 * 勾选列表数据时
 * @param {*} param0
 */
const handleSelectionChange = ({ ids, row }) => {
  state.ids = ids
  state.rows = row
  state.multipleDis = !row.length
  state.singleDis = row.length != 1
  initBtn()
}
handleSelectionChange({ ids: [], row: [] })

// 条件查询
const selectSubmit = (val) => {
  Object.keys(val).forEach((t) => (query[t] = val[t]))
  getList()
}

//新增弹窗
const addDic = () => {
  state.title = '新增'
  state.isShow = true
}

//修改弹窗
const editDic = async (id) => {
  proxy.loading()
  try {
    const res = await GetViewAPI(id)
    Object.keys(res.data).forEach((t) => (ruleForm.value[t] = res.data[t]))
    state.title = '修改'
    state.isShow = true
  } catch (error) {
  } finally {
    proxy.closeLoading()
  }
}

//查看弹窗
const lookDic = async (id) => {
  proxy.loading()
  try {
    const res = await GetViewAPI(id)
    Object.keys(res.data).forEach((t) => (ruleForm.value[t] = res.data[t]))
    state.title = '查看'
    state.isShow = true
  } catch (error) {
  } finally {
    proxy.closeLoading()
  }
}

// 关闭弹窗
const close = () => {
  state.isShow = false
  Object.keys(ruleForm.value).forEach((t) => (ruleForm.value[t] = ''))
}

// 新增提交
const addSub = async () => {
  const result = await proxy.$refs.formRef.submit()
  if (!result) return
  state.btnLoading = true
  try {
    await AddDataAPI(result)
    proxy.successMsg('新增成功!')
    close()
    getList()
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改提交
const editSub = async () => {
  const result = await proxy.$refs.formRef.submit()
  if (!result) return
  state.btnLoading = true
  try {
    await EditDataAPI(result)
    proxy.successMsg('修改成功!')
    close()
    getList()
  } catch {
  } finally {
    state.btnLoading = false
  }
}

//删除
const remove = async (id) => {
  proxy.loading()
  try {
    const MesBox = await proxy.DelMessageBox()
    if (!MesBox) return
    await DelDataAPI(id)
    proxy.successMsg('删除成功!')
    getList()
  } catch (error) {
  } finally {
    proxy.closeLoading()
  }
}

//批量删除
const batchRemove = async () => {
  proxy.loading()
  try {
    await DelDataAPI(state.ids)
    proxy.successMsg('删除成功!')
    getList()
  } catch (error) {
  } finally {
    proxy.closeLoading()
  }
}

//启用
const enable = async (id) => {
  proxy.loading()
  try {
    const MesBox = await proxy.DelMessageBox('是否启用?')
    if (!MesBox) return
    await EnableAPI(id)
    proxy.successMsg('启用成功!')
    getList()
  } catch (error) {
  } finally {
    proxy.closeLoading()
  }
}

//停用
const deactivate = async (id) => {
  proxy.loading()
  try {
    const MesBox = await proxy.DelMessageBox('是否停用?')
    if (!MesBox) return
    await StopAPI(id)
    proxy.successMsg('停用成功!')
    getList()
  } catch (error) {
  } finally {
    proxy.closeLoading()
  }
}

// 获取列表
const getList = async () => {
  state.loading = true
  try {
    const result = await GetListAPI(query)
    tableData.value = result.rows
    state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}
getList()
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />
    <el-card class="box-card">
      <p-table
        :loading="state.loading"
        keyId="materialId"
        :column="column"
        :data="tableData"
        @change="handleSelectionChange"
        :total="state.total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getList"
      >
        <template #buttons>
          <!-- 按钮组件 -->
          <p-button :list="btnList" @add="addDic" @remove="batchRemove" />
        </template>
        <template #columnCell="{ column, record }">
          <p-producer
            :data="record.auxiliaryAttribute"
            v-if="column.prop == 'fzsx'"
          />
          <p-dictTag
            v-if="column.prop == 'status'"
            :options="maintenance_plan_status"
            :value="record.status"
          />

          <p-operate
            v-if="column.prop == 'x'"
            :list="[
              {
                icon: 'Edit',
                emit: 'edit',
                text: '修改',
                type: 'primary',
                hasPermi: 'maintenance:plan:edit',
                disabled: record.status != '1',
              },
              {
                icon: 'Delete',
                emit: 'remove',
                text: '删除',
                type: 'danger',
                hasPermi: 'maintenance:plan:remove',
                disabled: record.status != '1',
              },
              {
                icon: 'Search',
                emit: 'look',
                text: '查看',
                type: 'primary',
                hasPermi: 'maintenance:plan:query',
              },
              {
                icon: '',
                emit: 'enable',
                text: '启用',
                type: 'primary',
                disabled: record.status != 1,

                hasPermi: 'maintenance:plan:enable',
              },
              {
                icon: '',
                emit: 'deactivate',
                text: '停用',
                type: 'primary',
                disabled: record.status != 2,
                hasPermi: 'maintenance:plan:deactivate',
              },
            ]"
            @edit="editDic(record.id)"
            @remove="remove(record.id)"
            @look="lookDic(record.id)"
            @enable="enable(record.id)"
            @deactivate="deactivate(record.id)"
          />
        </template>
      </p-table>
    </el-card>
    <!-- 新增 -->
    <p-dialog
      v-model="state.isShow"
      :title="state.title"
      :loading="state.btnLoading"
      @close="close"
      @ok="state.title == '新增' ? addSub() : editSub()"
      width="60%"
    >
      <Form
        ref="formRef"
        :data="ruleForm"
        :title="state.title"
        :disabled="state.title == '查看'"
      />
    </p-dialog>
  </div>
</template>
<style scoped lang="scss"></style>
